import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Input, InputSize } from "./input";
import { action } from "@storybook/addon-actions";
import { useState } from "react";
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  title: "components/Input",
  component: Input,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: "centered",
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ["autodocs"],
  // More on argTypes: https://storybook.js.org/docs/api/argtypes
  argTypes: {
    size: {
      control: "radio",
      options: Object.values(InputSize),
      description: "输入框大小",
    },
    disabled: { control: "boolean", description: "是否可用" },
    icon: { control: "text", description: "icon" },
    prepend: { control: "text", description: "前缀" },
    append: { control: "text", description: "后缀" },
  },
  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
  args: { onChange: fn() },
} satisfies Meta<typeof Input>;

export default meta;
type Story = StoryObj<typeof meta>;

export const ControlledInput = () => {
  const [value, setValue] = useState("");
  return (
    <Input
      value={value}
      defaultValue={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
};
export const defaultInput = () => (
  <>
    <Input
      style={{ width: "300px" }}
      placeholder="placeholder"
      onChange={action("changed")}
    />
    <ControlledInput />
  </>
);
export const disabledInput = () => (
  <Input style={{ width: "300px" }} placeholder="disabled input" disabled />
);

export const iconInput = () => (
  <Input
    style={{ width: "300px" }}
    placeholder="input with icon"
    icon="search"
  />
);

export const sizeInput = () => (
  <>
    <Input
      style={{ width: "300px" }}
      defaultValue="large size"
      size={InputSize.Large}
    />
    <Input
      style={{ width: "300px" }}
      placeholder="small size"
      size={InputSize.Small}
    />
  </>
);

export const pandInput = () => (
  <>
    <Input
      style={{ width: "300px" }}
      defaultValue="prepend text"
      prepend="https://"
    />
    <Input style={{ width: "300px" }} defaultValue="google" append=".com" />
  </>
);
